<template>
  <div>
    <h4>Parent Component</h4>
    <p>Car Name: {{ car.name }}</p>
    <p>Car Color: {{ car.color }}</p>
    <p>Car Year: {{ car.year }}</p>
    <p>Car Price: {{ car.price }}</p>
    <button class="btn" @click="handlePrice(1000)">Add 1000 to Price</button>
    <p>Child toy: {{ childToy }}</p>
    <!-- 方式1  -->
    <button class="btn" @click="getToy">通过refs获取儿子的玩具</button>
    <!-- 方式2 -->
    <button class="btn" @click="getToy2($refs)">通过refs获取儿子的属性console</button>
  </div>
  <Child ref="refChild" />
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue';
import Child from './Child.vue';

let car = reactive({
  name: 'BMW',
  color: 'red',
  year: 2021,
  price: 100000
});

const handlePrice = (newPrice: number): void => {
  car.price += newPrice;
}

interface Child {
  toy: string;
}

const refChild = ref<Child | null>(null)

onMounted(() => {
  console.log(refChild.value?.toy); //获取子节点的toy属性
});

//获取儿子的toy属性
const childToy = ref<string | null | undefined>('')
const getToy = () => {
  childToy.value = refChild.value?.toy;
}

//通过$refs
const getToy2 = ($refs: any) => {
  console.log("$refs.refChild-----", $refs.refChild);
}



defineExpose({ car })

</script>

<style scoped lang='scss'></style>
